<template>
	<div class="cdn-stream" :style="`height:${height}px`">
		<video
			id="cdn-video-container-mobile"
			class="stream"
			playsinline
			webkit-playsinline
		></video>
		<div class="cdn-stream-poster" v-if="!playerParams.allowPlay">
			<div class="poster">
				<img class="poster__inner" :src="`//${liveDetail.previewPicture}`" alt="" />
			</div>
		</div>
	</div>
</template>
<script setup>
import usePlayer from '../../hooks/usePlayer'
import { computed, onMounted } from 'vue'
import { useStore } from 'vuex'

const store = useStore()
const liveDetail = computed(() => store.state.live.detail)

defineProps({
	height: {
		type: Number,
		default: 0
	}
})
const { player, playerParams, apiHeartbeat } = usePlayer({
	el: 'cdn-video-container-mobile'
})
onMounted (() => {
	window.setInterval(apiHeartbeat, 3000)
})

</script>
<style lang="less" scoped>
.cdn-stream {
	width: 100%;
	position: relative;
	&-poster {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		background-color: #000;
		.poster {
			height: 100%;
			width: 100%;
			display: flex;
			justify-content: center;
			flex-direction: column;
			&__inner {
				width: 100%;
				object-fit: contain;
			}
		}
	}

	.stream {
		width: 100%;
		height: 100%;
		.loading {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #000;
			display: flex;
			&:before {
				content: "loading...";
				display: block;
				color: #fff;
				font-size: 24px;
				width: 100px;
				height: 30px;
				line-height: 30px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
	.stream-poster {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		&--inner {
			width: 100%;
			vertical-align: middle;
		}
	}
}
</style>
